<div class="model-update-wrap">
  <!-- 基础信息 -->
  <h3>基本信息</h3>
  <!-- 分类 -->
  <nz-form-item>
    <nz-form-label nz-col nzRequired>分类</nz-form-label>
    <nz-form-control
      nz-col
      nzFlex="320px">
      <nz-select
        nzShowSearch
        nzAllowClear
        nzPlaceHolder="请选择分类"
        [disabled]="routerParams.type == 1"
        [(ngModel)]="typeId"
        (ngModelChange)="classChange($event)">
        <nz-option
          *ngFor="let item of classOptions"
          [nzLabel]="item.name"
          [nzValue]="item.id">
        </nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item >

  <!-- Table -->
  <h3>机型配置</h3>
  <div class="table-wrap">
    <div class="p-b-10">
      <button nz-button nzType="primary" [disabled]="isBtnDisabled()" (click)="showModal()">
        <i nz-icon nzType="plus" nzTheme="outline"></i>添加机型
      </button>
      <span class="add-tips" [hidden]="typeId">※ 请先选择分类</span>
    </div>

    <nz-table
      #basicTable
      nzSize="small"
      nzBordered
      [nzShowPagination]="false"
      [nzData]="tableData">
      <thead>
        <tr>
          <th nzAlign="center">ID</th>
          <th nzAlign="center">机型名称</th>
          <th nzAlign="center">所属系列</th>
          <th nzAlign="center">所属品牌</th>
          <th nzAlign="center">排序</th>
          <th nzAlign="center">状态</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of tableData; let index = index;">
          <td nzAlign="center">{{ data.modelId }}</td>
          <td nzAlign="center">{{ data.modelName || '-' }}</td>
          <td nzAlign="center">{{ data.seriesName || '-' }}</td>
          <td nzAlign="center">{{ data.brandName || '-' }}</td>
          <td nzAlign="center">
            <nz-input-number
              [nzMin]="0"
              [nzPrecision]="0"
              [nzStep]="1"
              nzPlaceHolder="请输入"
              [(ngModel)]="data.sort">
            </nz-input-number>
          </td>
          <td nzAlign="center">
            <nz-switch
              [(ngModel)]="data.isChecked"
              nzCheckedChildren="启用"
              nzUnCheckedChildren="禁用">
            </nz-switch>
          </td>
          <td nzAlign="center">
            <button nz-button nzType="link" nzDanger (click)="deleteItem(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>

  <div class="p-t-30">
    <button nz-button nzType="primary" [nzLoading]="subLoading" class="m-r-8" (click)="submitData()">保存</button>
    <button nz-button nzType="default" (click)="back()">返回</button>
  </div>
</div>

<!-- 选择机型 Modal START -->
<nz-modal
  nzWidth="1000px"
  [nzFooter]="null"
  [(nzVisible)]="isVisible"
  nzTitle="添加机型"
  (nzOnCancel)="handleCancel()">

  <ng-container *nzModalContent>
    <div class="model-seach">
      <div class="seach-item">
        <label class="seach-item-label">机型：</label>
        <input
          class="seach-ipt"
          nz-input
          placeholder="请输入手机品牌或者型号"
          [(ngModel)]="modelSeachForms.name"
        />
      </div>
  
      <button nz-button nzType="primary" (click)="seachData()">查询</button>
      <button nz-button nzType="default" (click)="resetData()">重置</button>
      <button nz-button nzType="primary" (click)="relationData()">确认选中 {{ setOfCheckedId.size }}</button>
    </div>

    <!-- table -->
    <nz-table
      #modelTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ y: '500px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="modelTableForms.tableLoading"
      [nzData]="modelTableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="modelTableForms.total"
      [nzPageIndex]="modelTableForms.page"
      [nzPageSize]="modelTableForms.pageSize"
      [nzShowTotal]="modelTotalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)">
      <thead>
        <tr>
          <th
            nzWidth="50px"
            nzAlign="center"
            [nzDisabled]="!modelTableData.length"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)">
          </th>
          <th nzAlign="center">ID</th>
          <th nzAlign="center">机型名称</th>
          <th nzAlign="center">所属系列</th>
          <th nzAlign="center">所属品牌</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of modelTable.data">
          <td
            [nzChecked]="setOfCheckedId.has(data.id)"
            (nzCheckedChange)="onItemChecked(data.id, $event, data)">
          </td>
          <td nzAlign="center">{{ data.id }}</td>
          <td nzAlign="center">{{ data.modelName || '-' }}</td>
          <td nzAlign="center">{{ data.seriesName || '-' }}</td>
          <td nzAlign="center">{{ data.brandName || '-' }}</td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #modelTotalTemplate let-total>共有 {{ modelTableForms.total }} 条</ng-template>
  </ng-container>
</nz-modal>
<!-- 选择机型 Modal END -->